<script setup lang="ts">
import { ref } from 'vue';
// 写 TS 代码了
// 使用 ref 泛型函数引入响应式数据
// age 是一个number 类型的变量
const age = ref<number>(0);
// ts 类型检查机制就生效了
// age.value = '123' // 不行
age.value = 123;
const name = ref<string>('bingo');
// name.value = 123 // 不行
name.value = 'xxx';
// 对象类型的数据
const profile = ref<{ gender: string; pic: string }>({
  gender: '男',
  pic: 'yyy',
});

// 也可以利用 TS 的推论（推导机制）
const count = ref(100);
// count.value = '123' // 不行
count.value = 123;

// 对象类型的数据
const profile2 = ref({
  gender2: '男',
  pic2: 'yyy',
});
profile2.value.gender2 = '女';

// 需求：从网络获取对象类型的数组。需要调用泛型函数指定数组的类型。
// 强制你用之前思考类型。
const todoList = ref<{ id: number; task: string; done: boolean }[]>([]);
todoList.value = [{ id: 1, task: '吃饭', done: false }];

// 使用类型别名定义todo的对象类型
type ToDo = { id: number; task: string; done: boolean };
const todoList2 = ref<ToDo[]>([]);
todoList2.value = [{ id: 1, task: '吃饭', done: false }];
</script>

<template>
  <div>TypeScript</div>
</template>

<style scoped></style>
